<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>云链AI文档 - 文档空间</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }
    .hover-scale {
      transition: transform 0.2s;
    }
    .hover-scale:hover {
      transform: scale(1.02);
    }
    .status-dot {
      transition: all 0.3s;
    }
    .status-dot:hover {
      transform: scale(1.2);
    }
  </style>
</head>
<body class="bg-gray-50 font-sans text-gray-700">

  <!-- 页面容器 -->
  <div class="flex h-screen">
    
    <!-- 左侧导航栏 -->
    <aside class="w-64 bg-white shadow-lg flex flex-col justify-between p-6 border-r border-gray-100">
      <div>
        <h1 class="text-2xl font-bold text-purple-600 mb-8 flex items-center">
          <span class="mr-2">📘</span> 云链AI文档
        </h1>
        <ul class="space-y-4 text-sm">
          <li>
            <a href="/upload.html" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">🏠</span> 首页
            </a>
          </li>
          <li>
            <a href="/summary.html" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">🤖</span> AI摘要
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">📖</span> 阅读记录
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">📋</span> 笔记管理
            </a>
          </li>
          <li>
            <a href="/space.html" class="flex items-center p-3 rounded-lg bg-purple-50 text-purple-600 font-medium">
              <span class="mr-3">📂</span> 文档空间
            </a>
          </li>
        </ul>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 p-8 relative bg-gray-50">
      <div class="max-w-7xl mx-auto">
        <!-- 顶部标题和搜索区 -->
        <div class="mb-8">
          <h2 class="text-3xl font-bold mb-6 text-gray-800">文档空间</h2>
          <div class="flex gap-4 items-center">
            <select class="border rounded-lg px-4 py-2.5 w-44 text-gray-600 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
              <option>选择文档格式</option>
              <option>docs</option>
              <option>pdf</option>
              <option>docx</option>
              <option>txt</option>
            </select>
            <div class="flex-1 relative">
              <input type="text" 
                placeholder="输入文档名称" 
                class="w-full border rounded-lg pl-4 pr-12 py-2.5 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all shadow-sm"
              />
              <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-purple-500">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </button>
            </div>
            <button class="bg-purple-600 text-white px-6 py-2.5 rounded-lg hover:bg-purple-700 transition-colors shadow-sm hover:shadow-md">
              搜索
            </button>
          </div>
        </div>

        <!-- 文档列表 -->
        <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
          <!-- 表头 -->
          <div class="grid grid-cols-7 gap-4 px-6 py-4 border-b text-gray-600 font-medium bg-gray-50 rounded-t-xl">
            <div class="col-span-2">文件名</div>
            <div>格式</div>
            <div>文件大小</div>
            <div>更新时间</div>
            <div>状态</div>
            <div>操作</div>
          </div>

          <!-- 文件列表 -->
          <div class="divide-y divide-gray-100" id="fileList">
            <!-- 文件列表将通过 JavaScript 动态生成 -->
          </div>

          <!-- 分页 -->
          <div class="flex justify-center items-center space-x-2 py-4 border-t bg-gray-50 rounded-b-xl">
            <button class="w-8 h-8 border rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100 transition-colors">
              <span class="transform rotate-180">→</span>
            </button>
            <button class="w-8 h-8 border rounded-lg flex items-center justify-center bg-purple-100 text-purple-600 font-medium hover:bg-purple-200 transition-colors">
              1
            </button>
            <button class="w-8 h-8 border rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100 transition-colors">
              →
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script>
    // 格式化文件大小
    function formatFileSize(bytes) {
      if (bytes === 0) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // 格式化日期时间
    function formatDateTime(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    }

    // 渲染文件列表
    function renderFileList(files) {
      const fileListElement = document.getElementById('fileList');
      fileListElement.innerHTML = '';

      if (files.length === 0) {
        fileListElement.innerHTML = `
          <div class="py-16 text-center">
            <img src="" 
              alt="暂无数据" 
              class="w-40 h-40 mx-auto mb-4 opacity-50"
            />
            <p class="text-gray-400">暂无数据</p>
          </div>
        `;
        return;
      }

      files.forEach(file => {
        const fileElement = document.createElement('div');
        fileElement.className = 'grid grid-cols-7 gap-4 px-6 py-4 hover:bg-gray-50 transition-colors hover-scale';
        fileElement.innerHTML = `
          <div class="col-span-2 flex items-center">
            <span class="text-gray-900 font-medium">${file.fileName}</span>
          </div>
          <div class="text-gray-600 flex items-center">${file.format}</div>
          <div class="text-gray-600 flex items-center">${formatFileSize(file.fileSize)}</div>
          <div class="text-gray-600 flex items-center">${formatDateTime(file.updateTime)}</div>
          <div class="flex items-center">
            <span class="status-dot w-2.5 h-2.5 ${file.status === '解析成功' ? 'bg-green-500' : 'bg-yellow-500'} rounded-full mr-2"></span>
            <span class="${file.status === '解析成功' ? 'text-green-600' : 'text-yellow-600'} font-medium">${file.status}</span>
          </div>
          <div class="flex space-x-4 text-sm">
            <a href="#" class="text-blue-500 hover:text-blue-600 font-medium transition-colors" onclick="readFile(${file.id})">阅读</a>
            <a href="#" class="text-red-500 hover:text-red-600 font-medium transition-colors" onclick="deleteFile(${file.id})">删除</a>
          </div>
        `;
        fileListElement.appendChild(fileElement);
      });
    }

    // 加载文件列表
    async function loadFileList(format = '', fileName = '') {
      try {
        const params = new URLSearchParams();
        if (format) params.append('format', format);
        if (fileName) params.append('fileName', fileName);

        const response = await fetch(`/api/files?${params.toString()}`);
        const result = await response.json();

        if (result.success) {
          renderFileList(result.data);
        } else {
          console.error('Failed to load files:', result.message);
        }
      } catch (error) {
        console.error('Error loading files:', error);
      }
    }

    // 删除文件
    async function deleteFile(id) {
      if (!confirm('确定要删除这个文件吗？')) return;

      try {
        const response = await fetch(`/api/files/${id}`, {
          method: 'DELETE'
        });
        const result = await response.json();

        if (result.success) {
          loadFileList(); // 重新加载文件列表
        } else {
          alert('删除失败: ' + result.message);
        }
      } catch (error) {
        alert('删除出错: ' + error.message);
      }
    }

    // 阅读文件
    function readFile(id) {
      window.location.href = `/read.html?id=${id}`;
    }

    // 文档格式筛选
    const formatSelect = document.querySelector('select');
    formatSelect.addEventListener('change', (e) => {
      const format = e.target.value === '选择文档格式' ? '' : e.target.value;
      const fileName = searchInput.value.trim();
      loadFileList(format, fileName);
    });

    // 搜索功能
    const searchInput = document.querySelector('input[type="text"]');
    const searchButton = document.querySelector('button');
    searchButton.addEventListener('click', () => {
      const format = formatSelect.value === '选择文档格式' ? '' : formatSelect.value;
      const fileName = searchInput.value.trim();
      loadFileList(format, fileName);
    });

    // 初始加载
    loadFileList();
  </script>

</body>
</html> 